<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useLocale } from 'vuetify';
import { useUserStore } from '@/store/userStore';
import { computed, onMounted } from 'vue';

const { t } = useLocale();
const userStore = useUserStore();
const router = useRouter();

// 获取当前用户信息
const currentUser = computed(() => userStore.getCurrentUser);
const roleText = computed(() => userStore.getRoleText);
const genderText = computed(() => userStore.getGenderText);
const extraInfo = computed(() => userStore.getExtraInfo);

// 在组件挂载时获取用户信息
onMounted(async () => {
  if (userStore.username && !userStore.name) {
    try {
      await userStore.getCurrentUserInfo();
    } catch (error) {
      console.error('获取用户信息失败:', error);
    }
  }
});

const items = [
  {
    title: t('profile'),
    props: {
      prependIcon: 'mdi-account-outline',
      link: true,
      to: '/profile',
      exact: true
    },
    value: '/profile'
  }
];

const handleLogout = () => {
  userStore.clearUserInfo();
  router.push({
    path: '/auth/login'
  });
  sessionStorage.clear();
};
</script>

<template>
  <VMenu :close-on-content-click="false">
    <template v-slot:activator="{ props }">
      <VBtn class="custom-hover-primary mr-3" variant="text" v-bind="props" icon>
        <VBadge dot color="success" offset-x="0" offset-y="3">
          <VAvatar size="35">
            <VImg 
              v-if="currentUser.avatar" 
              :src="currentUser.avatar" 
              height="35" 
              alt="user" 
            />
            <VImg 
              v-else 
              src="@/assets/images/users/avatar-1.jpg" 
              height="35" 
              alt="user" 
            />
          </VAvatar>
        </VBadge>
      </VBtn>
    </template>
    <VSheet rounded="md" width="280" elevation="10" class="mt-2">
      <!-- 用户信息展示区域 -->
      <VCardText class="pb-2">
        <div class="d-flex align-center">
          <VAvatar size="40" class="mr-3">
            <VImg 
              v-if="currentUser.avatar" 
              :src="currentUser.avatar" 
              alt="user" 
            />
            <VImg 
              v-else 
              src="@/assets/images/users/avatar-1.jpg" 
              alt="user" 
            />
          </VAvatar>
          <div>
            <div class="text-h6">{{ currentUser.name || currentUser.username }}</div>
            <div class="text-caption text-medium-emphasis">
              {{ roleText }} {{ genderText ? `· ${genderText}` : '' }}
            </div>
            <div v-if="extraInfo.department" class="text-caption text-medium-emphasis">
              {{ extraInfo.department }}
            </div>
            <div v-if="extraInfo.title" class="text-caption text-medium-emphasis">
              {{ extraInfo.title }}
            </div>
          </div>
        </div>
      </VCardText>
      
      <VDivider />
      
      <!-- 菜单项 -->
      <VList :items="items" lines="one" density="compact" class="pa-0" color="primary" />
      
      <VDivider />
      
      <!-- 登出按钮 -->
      <div class="pt-4 pb-4 px-5 text-center">
        <VBtn color="primary" variant="outlined" block @click="handleLogout">{{ $t('logout') }}</VBtn>
      </div>
    </VSheet>
  </VMenu>
</template>
